<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <Search />
      <crudOperation :permission="permission">
        <el-button
          slot="left"
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="addUpload()"
        >
          添加文件
        </el-button>
      </crudOperation>
    </div>

    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      style="width: 100%;"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column :selectable="checkboxT" type="selection" width="55" />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="id"
        label="ID"
        width="80px"
      />
      <el-table-column align="center" prop="thumbnailPath" label="图标">
        <template slot-scope="scope">
          <el-image :src="imageUrl(scope.row)" fit="contain" lazy>
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="name" label="名称" />
      <el-table-column align="center" prop="createBy" label="创建者" />
      <el-table-column
        :show-overflow-tooltip="true"
        align="center"
        prop="createTime"
        label="创建日期"
      />
      <el-table-column
        v-if="checkPer(['admin', 'uploadtaskdata:del'])"
        label="操作"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            v-permission="['admin']"
            :loading="fileLoading === scope.row.id"
            icon="el-icon-download"
            size="mini"
            @click="downSource(scope.row)"
          />&nbsp;&nbsp;
          <el-popover
            :ref="scope.row.id"
            v-permission="['admin', 'uploadtaskdata:del']"
            placement="top"
            width="200"
          >
            <p>确定删除该文件吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button
                size="mini"
                type="text"
                @click="$refs[scope.row.id].doClose()"
                >取消</el-button
              >
              <el-button
                :loading="delLoading"
                type="primary"
                size="mini"
                @click="delMethod(scope.row.id)"
                >确定</el-button
              >
            </div>
            <el-button
              slot="reference"
              type="danger"
              icon="el-icon-delete"
              size="mini"
            />
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import Search from './search'
import crudJob from '@/api/system/uploadTaskData'
import CRUD, { presenter } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import { parseTime } from '@/utils/index'
import { getToken } from '@/utils/auth' // getToken from cookie

export default {
  name: 'Task',
  components: { Search, pagination, crudOperation },
  cruds() {
    return CRUD({
      title: '任务',
      url: '/api/upload/task/data',
      crudMethod: { ...crudJob }
    })
  },
  mixins: [presenter()],
  created() {
    this.crud.optShow = {
      add: false,
      edit: false,
      del: true,
      download: false
    }
  },
  data() {
    return {
      delLoading: false,
      fileLoading: null,
      permission: {
        del: ['admin', 'uploadtaskdata:del']
      }
    }
  },
  methods: {
    imageUrl(row) {
      return `${window.VUE_APP_API_SERVER_ADDRESS}/api/download/${
        row.id
      }?type=thumb&token=${getToken()}`
    },
    downSource(row) {
      this.fileLoading = row.id
      crudJob
        .downloadFile(row.id, 'sourceVideo')
        .then(res => {
          const url = window.URL.createObjectURL(new Blob([res]))
          const link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          const arr_name = row.filePath.split('.')
          const suffix = arr_name[arr_name.length - 1]
          const fileName = parseTime(new Date()) + '-' + row.id + '.' + suffix
          link.setAttribute('download', fileName)
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
          this.fileLoading = null
        })
        .catch(() => {
          this.fileLoading = null
        })
    },
    addUpload() {
      this.$router.push({
        path: '/uploader/center',
        query: { fileType: 7600 }
      })
    },
    delMethod(id) {
      this.delLoading = true
      crudJob
        .del([id])
        .then(() => {
          this.delLoading = false
          this.$refs[id].doClose()
          this.crud.dleChangePage(1)
          this.crud.delSuccessNotify()
          this.crud.toQuery()
        })
        .catch(() => {
          this.delLoading = false
          this.$refs[id].doClose()
        })
    },
    checkboxT(row) {
      return row.id > 0
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-image__inner {
  height: 60px;
}
</style>
